<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h3>模态弹出窗主体</h3>

    <button class="btn btn-primary" type="button">点击我</button>
    <p>data-keyboard="true"使用esc建关闭窗口， data-backdrop="static"点击弹出窗口外侧，是否关窗口</p>
    <div class="modal fade" id="mymodal" data-keyboard="true" data-backdrop="static">

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">模态弹出窗标题</h4>
                </div>
                <div class="modal-body">
                    <p>模态弹出窗主体内容</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!--/.modal -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <h4>也可以使用data-toggle与data-target替换</h4>
    <script>
        $(function() {
            $(".btn").click(function() {
                $("#mymodal").modal("toggle");
            });
        });
    </script>
</body>

</html>